<template>
  <div class="padding10" >
    <div class="box box-custom">
      <div class="box-header with-border">
        <h3 class="box-title">系统角色管理</h3>
        <button type="button" class="btn btn-custom pull-right" v-on:click="showAddRoleDialog">添加角色</button>
      </div>
      <div class="box-body">
      <el-table class="top10" style="width: 100%;"
      :data="rolesListData"
      border stripe size='mini' height="480">
        <el-table-column
        prop="name"
        label="角色名称">
        </el-table-column>
        <el-table-column
        prop="description"
        label="角色描述">
        </el-table-column>
        <el-table-column label="状态" width="60">
          <template slot-scope="scope">
            {{ scope.row.status == '1' ?  '启用' : '禁用'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <!-- @click="handleClick(scope.row)" -->
            <el-button type="text" size="small" @click="showEditRoleDialog(scope.row)"><i class="el-icon-edit"></i> 编辑</el-button>
            <!-- el-button type="text" size="small">权限管理</el-button -->
            <el-button type="text" size="small" @click="delRole(scope.row)"><span class="danger"><i class="el-icon-delete"></i> 删除</span></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-pagination v-if="rolesTotal>0"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="pageSize"
      layout="prev, pager, next, total"
      :total="rolesTotal">
      </el-pagination>
    </div>
    </div>
    <el-dialog
    :title="handleRoleTitle"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose">
      <div>
      <form>
        <div class="input-group">
          <span class="input-group-addon">角色名</span>
          <input type="text" class="form-control" v-if="isAddRole" v-model="handleRoleData.name" />
          <span class="form-control" v-else>{{ handleRoleData.name }} </span>
        </div>
        <div class="input-group top10">
          <span class="input-group-addon">描述</span>
          <input type="text" class="form-control" v-model="handleRoleData.description" />
        </div>
        <div class="input-group top10">
          <span class="input-group-addon">状态</span>
          <select class="form-control" v-model="handleRoleData.status">
            <option value="1">启用</option>
            <option value="0">禁用</option>
          </select>
        </div>
        <div class="input-group top10">
          <label>操作权限分配：</label>
          <el-checkbox-group v-model="groupIds">
              <el-checkbox v-for="item in task" :label="item.id" :key="item.id">{{item.groupName}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="input-grop top20 center">
          <el-button size="small" @click="dialogVisible = false">取 消</el-button>
          <el-button size="small" type="success" @click="SubmitRoleData">提 交</el-button>
        </div>
      </form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'systemRole',
  data () {
    return {
      rolesListData: [],
      // 权限组
      task: [],
      // 权限分配
      groupIds: [],
      // true 添加， false 修改
      isAddRole: false,
      handleRoleData: {},
      handleRoleTitle: '',
      dialogVisible: false,
      rolesTotal: 0,
      pageSize: 10,
      page: 1
    }
  },
  prpos: {
  },
  components: {
  },
  methods: {
    handleCurrentChange (val) {
      this.page = val
    },
    handleClose (done) {
      this.$confirm('确认关闭？').then(_ => { done() }).catch(_ => {})
    },
    getTask () {
      this.$http.post('api/group/getAll').then(
        response => {
          this.task = response.data.data
        },
        response => {
          alert(response.message)
          console.log('error', response)
        }
      )
    },
    getRole () {
      // 'api/role/get/{:id}'
      // 'api/role/getByPage'; 参数 name pageIndex pageSize
      let url = 'api/role/getAll'
      this.$http.get(url).then(
        response => {
          this.rolesListData = response.data.data
          this.rolesTotal = this.rolesListData.length
        },
        response => {
          alert(response.message)
          console.log('error', response)
          this.rolesListData = [
            {id: 1, name: '测试1', description: '按时进行分级哦', status: 1},
            {id: 6, name: '测试2', description: 'ijhyhoiihosiohgs', status: 1},
            {id: 9, name: '测试3', description: '会u还是都普遍', status: 0}
          ]
        }
      )
    },
    showAddRoleDialog () {
      this.isAddRole = true
      this.handleRoleData = {}
      this.handleRoleTitle = '添加角色'
      this.groupIds = []
      if (this.task.length < 1) { this.getTask() }
      this.dialogVisible = true
    },
    showEditRoleDialog (role) {
      this.isAddRole = false
      this.handleRoleTitle = '编辑角色'
      if (this.task.length < 1) { this.getTask() }
      this.$http.get('api/role/get/' + role.id).then(
        response => {
          this.handleRoleData = response.data.data
          this.groupIds = this.handleRoleData.groupIds
          this.groupIds.forEach(function (value, index, _this) {
            _this[index] = parseInt(value.id)
          })
          this.dialogVisible = true
        },
        response => {
          alert(response.body.message ? response.body.message : response.body.error)
          console.log('error', response)
        }
      )
    },
    SubmitRoleData () {
      let formData = new FormData()
      this.handleRoleData.groupIds = this.groupIds
      for (let key in this.handleRoleData) {
        formData.append(key, this.handleRoleData[key])
      }
      this.isAddRole ? this.addRole(formData) : this.updateRole(formData)
    },
    addRole (role) {
      this.$http.post('api/role/save', role).then(
        response => {
          console.log('添加成功')
          this.dialogVisible = false
          this.getRole()
        },
        response => {
          alert(response.body.error ? response.body.error : response.body.message)
          console.log('error', response)
        }
      )
    },
    updateRole (role) {
      this.$http.post('api/role/save', role).then(
        response => {
          console.log('编辑成功')
          this.dialogVisible = false
          this.getRole()
        },
        response => {
          alert(response.body.error ? response.body.error : response.body.message)
          console.log('error', response)
        }
      )
    },
    delRole (role) {
      if (confirm('确认删除？') === false ) return false
      this.$http.get('api/role/delete/' + role.id).then(
        response => {
          this.getRole()
        },
        response => {
          alert(response.body.error ? response.body.error : response.body.message)
          console.log('error', response)
        }
      )
    }
  },
  created () { this.getRole('') }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input-group{margin-bottom: 10px;}
.input-group-addon{min-width: 120px; text-align: right;}
</style>
